<template>
	<page-header-wrapper>
		<template slot="extra">
			<!--<a-button type="primary" @click="detail">历史账单</a-button>-->
			<back-button />
			
		</template>
		<a-spin :spinning='loadingStore' slot='content' style="">
			<store-info-wrap :storeInfo='storeInfo' storeType='clothes' @check='getStoreInfo'></store-info-wrap>
		</a-spin>
		<a-spin :spinning="loading">
			
			<a-card :bordered="false">
				<a-descriptions title="总计/乐管家">
					<a-descriptions-item label="订单总单量">{{ list.total_order }}</a-descriptions-item>
					<a-descriptions-item label="订单总金额">{{ list.total_money }}</a-descriptions-item>

					<a-descriptions-item label="乐管家分享总金额">{{ list.share_money }}</a-descriptions-item>
					<a-descriptions-item label="乐管家分享总单量">{{ list.share_order }}</a-descriptions-item>
					<a-descriptions-item label="乐管家推广总金额">{{ list.from_money }}</a-descriptions-item>
					<a-descriptions-item label="乐管家推广总单量">{{ list.from_order }}</a-descriptions-item>
					<!-- <a-descriptions-item label="现金平台扣点金额">{{ list.wash_dec_money }}</a-descriptions-item>
					<a-descriptions-item label="平台及抖音平台扣点金额">{{ list.douyin_dec_money }}</a-descriptions-item> -->

				</a-descriptions>
				<a-descriptions title="线上/线下">
					<a-descriptions-item label="线上总金额">{{ list.online_money }}</a-descriptions-item>
					<a-descriptions-item label="线上总单量">{{ list.online_order }}</a-descriptions-item>
					<a-descriptions-item label="线上支付平台扣点金额">{{ list.online_dec_money }}</a-descriptions-item>
					<a-descriptions-item label="线下总金额">{{ list.offline_money }}</a-descriptions-item>
					<a-descriptions-item label="线下总单量">{{ list.offline_order }}</a-descriptions-item>
					<a-descriptions-item label="线下支付平台扣点金额">{{ list.offline_dec_money }}</a-descriptions-item>
				</a-descriptions>

				<a-descriptions title="抖音">
					<a-descriptions-item label="抖音总金额">{{ list.douyin_money }}</a-descriptions-item>
					<a-descriptions-item label="抖音总单量">{{ list.douyin_order }}</a-descriptions-item>
					<a-descriptions-item label="抖音平台扣点金额">{{ list.douyin_dec_money }}</a-descriptions-item>
				</a-descriptions>

				<a-divider style="margin-bottom: 32px" />
				<a-button type="primary" @click="$refs.billPrice.show()" v-if="userInfo.type === 1">生成账单</a-button>
			</a-card>
			<a-card :bordered="false" style="margin-top:24px">
				<div style="display: flex">
					<div class="ant-descriptions-title">对账单</div>
					<!--<span class="table-page-search-submitButtons" style="margin-left: 30px">
            <a-button type="primary" @click="getData(1)" >本月</a-button>
            <a-button type="primary" @click="getData(2)" >上月</a-button>
          </span>-->
				</div>
				<div class="table-page-search-wrapper">
					<s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData"
						:pagination="pagination">
					</s-table>
				</div>
			</a-card>
		</a-spin>

		<billPrice ref="billPrice" :sid="id" @change1="bill()" @change2="getBillShow" />
	</page-header-wrapper>
</template>

<script>
	import {
		storeInfo
	} from '@/api/store'
	import billPrice from './modules/billPrice'
	import orderStatus from '@/mixins/orderStatus'
	import payStatus from '@/mixins/payStatus'
	import clothesStatus from '@/mixins/clothesStatus'
	import BackButton from '@/components/BackButton'
	import StoreInfoWrap from '@/views/store/modules/StoreInfoWrap'
	import {
		billShow,
		billList
	} from '@/api/stat'
	import formTableMixin from '@/mixins/formTableMixin'
	import statInfo from '@/components/stat-info/stat-info'
	import StewardWalletShowTable from './modules/StewardWalletShowTable.vue'
	import {
		mapGetters
	} from "vuex";
	const columns = [{
			title: '门店id',
			dataIndex: 'store_id'
		},
		{
			title: '账单时间',
			dataIndex: 'bill_date'
		},
		{
			title: '总单量',
			dataIndex: 'total_order'
		},
		{
			title: '总金额',
			dataIndex: 'total_money'
		},
		{
			title: '线下总单量',
			dataIndex: 'offline_order'
		},
		{
			title: '线下总金额',
			dataIndex: 'offline_money'
		},
		{
			title: '线下支付平台扣点金额',
			dataIndex: 'offline_dec_money'
		},
		{
			title: '抖音总单量',
			dataIndex: 'douyin_order'
		},
		{
			title: '抖音总金额',
			dataIndex: 'douyin_money'
		},
		{
			title: '抖音平台扣点金额',
			dataIndex: 'douyin_dec_money'
		},
		
		{
			title: '线上总单量',
			dataIndex: 'online_order'
		},
		{
			title: '线上总金额',
			dataIndex: 'online_money'
		},
		{
			title: '线上支付平台扣点金额',
			dataIndex: 'online_dec_money'
		},
		
		{
			title: '乐管家分享总金额',
			dataIndex: 'share_money'
		},
		{
			title: '乐管家分享总单量',
			dataIndex: 'share_order'
		},
		{
			title: '乐管家推广总单量',
			dataIndex: 'from_order'
		},
		{
			title: '乐管家推广总金额',
			dataIndex: 'from_money'
		},
		
		
		{
			title: '快递费用',
			dataIndex: 'express_money'
		},
		{
			title: '快递总单量',
			dataIndex: 'express_order'
		},
		{
			title: '结算价格',
			dataIndex: 'settlement_money'
		},
		{
			title: '扣点详情参考',
			dataIndex: 'ratio'
		},
		/*{
		  title: '操作',
		  dataIndex: 'actions',
		  width: '150px',
		  scopedSlots: { customRender: 'actions' }
		}*/
	]
	export default {
		mixins: [orderStatus, payStatus, clothesStatus, formTableMixin],
		components: {
			statInfo,
			StewardWalletShowTable,
			BackButton,
			billPrice,
			StoreInfoWrap
		},
		data() {
			this.columns = columns
			return {
				loading: false,
				id: '',
				list: [],
				storeInfo: {},
				loadingStore: false
			}
		},
		computed: {
			...mapGetters(['userInfo']),
			bill: function bill() {
				return this.listAction = parameter =>
					billList({
						store_id: this.id
					}).then(res => {
						this.loading = false
						return res
					})
			}
		},
		created() {
			this.id = this.id ? this.id : this.$route.query.id;
			this.getStoreInfo()
			console.log(this.id)
			this.bill();
			this.getBillShow();
		},
		methods: {
			getStoreInfo() {
				this.loadingStore = true
				const params = this.$route.params
				storeInfo({
						id: this.id,
						type: 'clothes'
					})
					.then(res => {
						this.storeInfo = res.data
						this.loadingStore = false
					})
			},
			getBillShow() {
				billShow({
					store_id: this.id
				}).then(res => {
					this.loading = false
					this.list = res.data;
					this.$refs.table.refresh()
				})

			},
			detail() {
				this.$router.push({
					name: 'billList',
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	.table-title-container {
		display: flex;
		align-items: center;
		margin-bottom: 32px;

		.table-title {
			margin: 0;
		}

		.imgs {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex: 1;

			img {
				width: 80px;
				height: 80px;
				margin-left: 20px;
			}
		}

		.imgpage {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.3);
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			display: flex;
			align-content: center;
			justify-content: center;
			z-index: 2000;

			img {}
		}
	}

	.print-item-wrap {
		box-shadow: 0px 1px 10px 0px rgba(217, 217, 217, 0.35);
		border: 1px solid #eeeeee;
		width: 556px;

		&:not(:first-child) {
			margin-top: 10px;
		}
	}

	.print-item {
		background: #ffffff;
		display: flex;
		padding: 18px 20px 16px;
		box-sizing: border-box;

		.print-img {

			// width: 86px;
			// height: 41px;
			img {
				width: 100%;
				height: 100%;
			}
		}

		.print-code {
			margin-top: 8px;
			font-size: 12px;
			text-align: center;
		}

		.print-right {
			flex: 1;
			display: inline-block;
		}

		.print-info {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			width: 426px;

			.print-info-item {
				font-size: 14px;
				margin-left: 20px;
				// display: inline-block;
			}
		}
	}

	// .print-page {
	//   .print-info {
	//    line-height: 1.2;
	//   }
	// }

	.print-container {
		.print-btns {
			display: flex;
			margin-top: 20px;

			button {
				margin-right: 8px;
			}
		}
	}
</style>